<template>
  <div class="box" ref="target">
    目标元素
  </div>
</template>

<script>
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export default {
  setup () {
    const target = ref(null)

    // 用于检测元素可见性的函数 - 结构从文档中CV即可
    /*
      功能介绍：
        useIntersectionObserver  检查元素可见性的核心函数
          stop                     用于停止检查(函数)
          target                   被检测可见性的目标元素(DOM对象/组件)
          isIntersecting           元素是否可见(布尔值)
    */
    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }]) => {
        // console.log(isIntersecting, '元素可见性')
        if (isIntersecting) {
          // 模拟发送请求业务
          console.log('元素可见, 发送网络请求~~~~~')
          // 请求发送后，停止检查
          stop()
        }
      }
    )

    return { target }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: plum;
  margin:1000px auto ;
}
</style>
